import React, { Component } from 'react'
import { NavBar, Carousel, Flex } from "antd-mobile";
import SearchBar from "../SearchBar/SearchBar"
import "./Index.css"
import { withRouter } from "react-router-dom"
import myaxios from "../../utils/myaxios"
import axios from "axios"
class Index extends Component {
    constructor(props) {
        super(props);
        const CancelToken = axios.CancelToken;
        this.source = CancelToken.source();
    }
    state = {
        swiper_list: [],
        imgHeight: 170,
        catitems: [], //首页分类的数据
        productData: []// 图片列表的数据
    };
    SwiperClick = (goods_id) => {
        this.props.history.push("/goodDetail/" + goods_id);
    };
    CatItemClick = (params) => {
        this.props.history.push("/category");
    }
    ImgClick = () => {
        this.props.history.push("/goodList/query='123'");
    }
    componentDidMount() {
        myaxios.get("home/swiperdata", {
            cancelToken: this.source.token
        }).then((res) => {
            console.log(res)
            this.setState({
                swiper_list: res
            })
        }).catch((err) => console.log(err));
        myaxios.get("/home/catitems", {
            cancelToken: this.source.token
        }).then(res => {
            this.setState({
                catitems: res
            })
        });
        myaxios.get("/home/floordata", {
            cancelToken: this.source.token
        }).then(res => {
            this.setState({
                productData: res
            })
        })
    }
    render() {
        return (
            <div className="index">
                {/* 首页导航开始 */}
                <div className="index-nav">
                    <NavBar className="nav">商城</NavBar>
                </div>
                {/* 首页导航结束 */}
                {/* 首页搜索框开始 */}
                <div className="index-search">
                    <SearchBar></SearchBar>
                </div>
                {/* 首页搜索框结束 */}
                {/* 首页轮播图开始 */}
                <div className="index-swiper">
                    <Carousel autoplay={true} infinite>
                        {this.state.swiper_list.map((val) => (
                            <div
                                onClick={this.SwiperClick.bind(this, val.goods_id)}
                                key={val.goods_id}
                                style={{
                                    display: "inline-block",
                                    width: "100%",
                                    height: this.state.imgHeight,
                                }}
                            >
                                <img
                                    src={val.image_src}
                                    alt=""
                                    style={{ width: "100%", verticalAlign: "top" }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event("resize"));
                                        this.setState({ imgHeight: "auto" });
                                    }}
                                />
                            </div>
                        ))}
                    </Carousel>
                </div>
                {/* 首页轮播图结束 */}
                {/* 首页分类导航开始 */}
                <div className="index-catitems">
                    <div className="catitems-item">
                        <Flex>
                            {
                                this.state.catitems.map(catitemsItem => {
                                    return <Flex.Item key={catitemsItem.image_src} onClick={this.CatItemClick}>
                                        <img src={catitemsItem.image_src} alt="" />
                                    </Flex.Item>
                                })
                            }
                        </Flex>
                    </div>
                </div>
                {/* 首页分类导航结束 */}
                {/* 首页图片列表开始 */}
                <div className="index-productData">
                    {
                        this.state.productData.map(HeraderImgList => {
                            return <div key={HeraderImgList.floor_title.image_src} className="productData-item">
                                {/* 标题开始 */}
                                <div className="product-title">
                                    <img src={HeraderImgList.floor_title.image_src} alt="" />
                                </div>
                                {/* 标题结束 */}
                                {/* 图片列表的开始 */}
                                <div className="product-image-list">
                                    {
                                        HeraderImgList.product_list.map(ImgList => {
                                            return <div className="image-list-item" key={ImgList.image_src} onClick={this.ImgClick}>
                                                <img src={ImgList.image_src} alt="" />
                                            </div>
                                        })
                                    }
                                </div>
                                {/* 图片列表的结束 */}
                            </div>
                        })
                    }
                </div>
                {/* 首页图片列表结束 */}
            </div>
        )
    }
}
export default withRouter(Index);